<template>
  <view style="position: relative;">
    <view class="topTitle"
          :style="[{ 'height': actionHeight }, { 'background-color': actionClolor }]">
      <view style="display: flex;flex-direction: column; bottom: 0;position: absolute;width: 100%;">
        <view style="box-sizing: border-box; padding:0 30rpx;"
              :v-if="!customTitle"
              class="row verticalCenterInRow "
              :style="[{ 'height': statusBarHeight }]">
          <view v-if="showBackIcon">
            <view class="iconfont"
                  @click="back">
              <image src="https://image.dingxians.cn/image/2025-07-09/105128099.png"
                     style="height: 60rpx;"
                     v-if="home"
                     mode="heightFix" />
              <image src="https://image.dingxians.cn/image/2025-09-15/202383133.png"
                     style="height: 36rpx;"
                     v-else
                     mode="heightFix" />
            </view>
            <!-- <view class="iconfont icon-fanhui" style="padding-left: 20rpx;" @click="back" v-else></view> -->
          </view>
          <view :class="[titleCenter ? 'center' : '']">
            <view class="titleText"
                  :style="{ 'color': titleDColor }">{{ pageTitle||tarTitle }}</view>
          </view>
          <view style="width: 60rpx;"></view>
        </view>
        <view v-if="customTitle"
              class="slotView"
              :style="{ 'height': statusBarHeight }">
          <slot name="title"></slot>
        </view>
      </view>
    </view>

    <view>
      <view>
        <slot></slot>
      </view>
    </view>
  </view>

</template>
<script>
export default {
  name: 'v-headerview',
  props: {
    titleColor: {
      type: String,
      default: '#000000'
    },
    actionBarColor: {
      type: String,
      default: '#ffffff'
    },
    pageTitle: {
      type: String,
      default: ''
    },
    showBackIcon: {
      type: Boolean,
      default: false
    },
    customTitle: {
      type: Boolean,
      default: false
    },
    home: {
      type: Boolean,
      default: false
    },
    titleCenter: {
      type: Boolean,
      default: true
    }
  },

  data () {
    return {
      tarTitle: '',
      statusBarHeight: '',
      actionHeight: '44px',
      actionClolor: '#ffffff',
      titleDColor: '#ffffff'
    }
  },
  created () {
    let that = this
    uni.getSystemInfo({
      success (res) {
        that.actionHeight = (res.statusBarHeight * 2 + 72) + 'rpx'
        that.statusBarHeight = '90rpx'
      }
    })
    this.actionClolor = this.actionBarColor + '00'
    this.titleDColor = this.titleColor
  },

  mounted () {
    var that = this;
    uni.$on('onPageScroll', function (data) { //接收参数
      if (data >= 0) {
        if (data <= 255) {
          var alpha = (data).toString(16).split('.')[0]
          if (alpha.length == 1) {
            alpha = '0' + alpha
          }
          that.actionClolor = that.actionBarColor + alpha
          that.titleDColor = that.titleColor

          uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#ff0000',
            animation: {
              duration: 400,
              timingFunc: 'easeIn'
            }
          })
        } else if (data > 255) {

          uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#ff0000',
            animation: {
              duration: 400,
              timingFunc: 'easeIn'
            }
          })
          that.actionClolor = that.actionBarColor + 'ff'
          that.titleDColor = that.titleColor + 'ff'
        } else {
          var alpha = (data).toString(16).split('.')[0]
          if (alpha.length == 1) {
            alpha = '0' + alpha
          }
          that.actionClolor = that.actionBarColor + alpha
          that.titleDColor = that.titleColor

          uni.setNavigationBarColor({
            frontColor: '#ffffff',
            backgroundColor: '#ff0000',
            animation: {
              duration: 400,
              timingFunc: 'easeIn'
            }
          })
        }
      }
    });

  },
  methods: {
    back () {
      if (uni.getStorageSync('home') == 1) {
        uni.switchTab({
          url: '/pages/index/index',
        })
      } else {
        uni.navigateBack()
      }
      uni.$emit("onPageScroll", 0)
    }

  }
}
</script>
<style lang="scss">
.row {
  display: flex;
  flex-direction: row;
}

.verticalCenterInRow {
  align-items: center;
  justify-items: center;
  display: flex;
}

.topTitle {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}

.tileContent {
  bottom: 0;
}

.titleText {
  font-weight: 400;
  font-size: 36rpx;
  font-family: text1;
  // margin-left: 20rpx;
}

.scoll {
  height: calc(100vh);
}

.center {
  flex: 1;
  align-items: center;
  justify-content: center;
  display: flex;
}

.slotView {
  align-items: center;
  justify-content: center;
  display: flex;
}

/* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: "iconfont";
  /* Project id 4052467 */
  src: url("//at.alicdn.com/t/c/font_4052467_akm2gehw41.woff2?t=1683708618833")
      format("woff2"),
    url("//at.alicdn.com/t/c/font_4052467_akm2gehw41.woff?t=1683708618833")
      format("woff"),
    url("//at.alicdn.com/t/c/font_4052467_akm2gehw41.ttf?t=1683708618833")
      format("truetype");
}

.iconfont {
  height: 60rpx;
  display: flex;
  align-items: center;

  image {
    height: 100%;
  }
}
</style>